import React from 'react'
import styled from 'styled-components'

/**
 * 
 * capture & bubble
 * event handler（处理句柄函数）
 * camelCase function in react
 * 
 * mouse event （鼠标事件）
 * keyboard event （键盘事件）
 * other event （其他时间）
 * 
 * stopPropagation
 * e.preventDefault()
 * 
 * create event manually
 * 
 * raw API
 *   document.addEventListener(eventName, listener);
 *   document.removeEventListener(eventName, listener);
 * 
 */
const Wrapper = styled.div`
  min-height: 90vh;
  display: grid;
  place-items: center;
  & h1, h2, h3 {
    text-align: center;
    outline: 1px solid gray;
  }
  & form {
    display: inline-block;
  }
  & div:focus, button:focus {
    outline: 7px dotted purple;
  }
  & div {
    padding: 1rem 4rem;
  }
  & div, button {
    margin-top: 2rem;
  }
  & button {
    padding: .6rem 2rem;
    font-size: 1.2rem;
  }
  & div.block {
    margin: 0;
    padding: 0;
  }
  & div.block button {
    margin: 0;
  }
`
const Root = styled.div`
  border: 9px solid red;
`
const Block = styled.div`
  border: 6px solid green;
`
const Item = styled.div`
  border: 3px solid blue;
`

export default function Demo() {
  // const [count, setCount] = React.useState(0);
  const refRoot = React.useRef<any>(null);
  const handlerEvent = (type:string, owner:string) => (e:any) => {
    const id = e.target.id;
    const msg = `!!!!!! event [${type}] from #${id} & handle by @${owner}`;
    console.log(msg);
    if (!!e.detail) {
      console.log(e.detail);
    }
    // if (owner === 'block') {
    //   e.stopPropagation();
    // }
  }
  // const handleSubmit = (e:any) => {
  //   console.log('submit')
  //   e.preventDefault();
  // }
  const toDispatch = () => {
    const event = new Event('click');
    refRoot?.current?.dispatchEvent(event);
  }
  const toDispatchCstm = () => {
    const event = new CustomEvent('click', {detail: "demo customize"});
    refRoot?.current?.dispatchEvent(event);
  }

  return (
    <Wrapper>
      <Root id='root' ref={refRoot}
        onClickCapture={handlerEvent('click capture', 'root')}
        onClick={handlerEvent('click', 'root')}
        // onKeyDown={handlerEvent('key down', 'root')}
        // onFocus={handlerEvent('focus', 'root')}
      >
        <h1>Root</h1>
        <Block id='block'
          // onClickCapture={handlerEvent('click capture', 'block')}
          // onClick={handlerEvent('click', 'block')}
          // onKeyDown={handlerEvent('key down', 'block')}
          // onFocus={handlerEvent('focus', 'block')}
        >
          <h2>Block</h2>
          <Item id='item'
            // onClickCapture={handlerEvent('click capture', 'item')}
            // onClick={handlerEvent('click', 'item')}
            // onKeyDown={handlerEvent('key down', 'item')}
            // onFocus={handlerEvent('focus', 'item')}
          >
            <h3>Item</h3>
            <button id='button'
              // onClickCapture={handlerEvent('click capture', 'button')}
              // onClick={handlerEvent('click', 'button')}
              // onKeyDown={handlerEvent('key down', 'button')}
              // onFocus={handlerEvent('focus', 'button')}
            >
              button
            </button>
          </Item>
        </Block>
      </Root>

      {/* <div className="block">
        <button id="count" onClick ={() => setCount((x) => (x+1))}>{count}</button>
        <form id="form" onSubmit={handleSubmit}>
          <button id="submit" type="submit">Submit</button>
        </form>
      </div> */}

      <div className="block">
        <button onClick={toDispatch}>dispatch</button>
        <button onClick={toDispatchCstm}>custom</button>
      </div>

    </Wrapper>
  )
}
